<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ page import = "com.sinodata.bsm.common.vo.Event" %>
<%@ page import = "com.sinodata.bsm.center.bean.EventBean" %>
<%@ page import = "java.util.Date" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>事件详细信息</title>
	<%@ include file="../include/common.jsp"%>
	<%@ include file="../include/table.jsp"%>
	<%@ include file="../include/jbox.jsp"%>
	<%@ include file="../include/form.jsp"%>
	<script type="text/javascript" src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js">    </script>
	<link rel="stylesheet" media="all" type="text/css" href="${pageContext.request.contextPath}/style/default/bsm/view.css" />
	<style type="text/css">
		#process{margin:0 auto;padding:20px 0 20px 100px;}
		#process .node,#process .proce{float:left;position:relative;height:13px;background-image:url(/bsm/style/default/images/bg_state.jpg);background-repeat:no-repeat;}
		#process .node{width:13px;}
		#process .proce{width:150px;border:solid #fff;border-width:0 5px;}
		#process .tx1{height:36px;margin-bottom:16px;}
		#process .tx3{color:#999;line-height:15px;}
		.node.wait{background-position:-150px -40px;}
		.node.ready{background-position:-150px 0px;}
		.proce.wait{background-position:0 -40px;}
		.proce.ready{background-position:0 0;}
		#process .wait .tx2{color:#999;}
		#process ul{position:absolute;margin-top:-38px;text-align:center;}
		#process .proce ul{z-index:5;width:150px;}
		#process .node ul{z-index:1;width:318px;margin-left:-152px;}
	.contentSL{
		height:auto;
	}
	</style>
	<script type="text/javascript">
	var myChart;
	 var inputID = "input1";
		var selectID = "select1";
		var widt = 0;
		var inputWi = 0;
		var he = 0;
		$(function() {
			//流程处理
			if('${eventBean.event.status}' == '1'){
				$('#processdiv1').removeClass('wait');
				$('#processdiv1').addClass('ready');
				$('#processdiv2').removeClass('wait');
				$('#processdiv2').addClass('ready');
			}
			if('${eventBean.event.status}' == '2'){
				$('#processdiv1').removeClass('wait');
				$('#processdiv1').addClass('ready');
				$('#processdiv2').removeClass('wait');
				$('#processdiv2').addClass('ready');
				$('#processdiv3').removeClass('wait');
				$('#processdiv3').addClass('ready');
				$('#processdiv4').removeClass('wait');
				$('#processdiv4').addClass('ready');
			}
			if('${eventBean.causes}' != ''){
				$("#causeViewDiv").css({"display":""});
				$("#input1").val('${eventBean.causes}');
			}
			inputID = "input1";
			selectID = "select1";
			widt = 200;
			inputWi = widt - 20;
			var offset = $("input[id=input1]").offset();
			$("#" + selectID).change(function() {
				var newvar = $("#" + selectID).find("option:selected").text();
				if(newvar == '--请选择原因--'){
					newvar = '';
				}
				$("#" + inputID).val(newvar);
			}).css({
				"display" : "block",
				"width" : widt + "px",
				"z-index" : 1,
				"clip" : "rect(0px " + widt + "px 51px 151px)"
			});
			$("#" + inputID).css({
				"z-index" : 2,
				"width" : inputWi + "px"
			});
			initRemarkTable();
			initChart();
			 if('${filterflag}' == 'true'){
					initFilterTable();
				}
			 if('${notifyflag}' == 'true'){
				 initNotifyTable();
			 }
			 if('${notifyRuleflag}' == 'true'){
				 initNotifyRuleTable();
			 }
		});
		function initNotifyTable(){
			var oTable=	$('#notifyList').dataTable({
				"bProcessing": true, 
				"bServerSide": true,
				"sServerMethod": 'POST',
				"sAjaxSource":'${pageContext.request.contextPath}/event/event-view!listNotify.action?eventId='+${id},
				"bPaginate": false,
				"bSort": true,
				"bFilter":false,
				"bJQueryUI":false,
				"aoColumns":[
						{"mDataProp":"user","bSortable": false},
						{"mDataProp":"notifyMode","bSortable": false},
						{"mDataProp":"time","bSortable": false},
						{"mDataProp":"msg","bSortable": false}
				], 
				"oLanguage": { 
	 		 		"sZeroRecords": "没有记录",
					"sInfo": "  ", 
					"sInfoEmpty": "  "
				},
			    "fnServerParams":function(aoData){
			    }
			});
		}
		
		function initNotifyRuleTable(){
			var oTable=	$('#notifyList').dataTable({
				"bProcessing": true, 
				"bServerSide": true,
				"sServerMethod": 'POST',
				"sAjaxSource":'${pageContext.request.contextPath}/event/event-view!listNotifyRule.action?eventId='+${id},
				"bPaginate": false,
				"bSort": true,
				"bFilter":false,
				"bJQueryUI":false,
				"aoColumns":[
						{"mDataProp":"user","bSortable": false},
						{"mDataProp":"mobile","bSortable": false}
				], 
				"oLanguage": { 
	 		 		"sZeroRecords": "没有记录",
					"sInfo": "  ", 
					"sInfoEmpty": "  "
				},
			    "fnServerParams":function(aoData){
			    }
			});
		}
		function initRemarkTable(){
			//加载grid
			var oTable=	$('#remarkList').dataTable({
				"bProcessing": false, 
				"bServerSide": true,
				"sServerMethod": 'POST',
				"sAjaxSource":'${pageContext.request.contextPath}/event/event-view!remarksList.action?eventId='+${id},
				"bPaginate": false,
				"bSort": true,
				"bFilter":false,
				"bJQueryUI":false,
				"aoColumns":[
					{"mDataProp":"time","bSortable": false},
					{"mDataProp":"person","bSortable": false},
					{"mDataProp":"remarks","bSortable": false}
				], 
				 "oLanguage": { 
				 		 		"sZeroRecords": "没有记录",
								"sInfo": "  ", 
								"sInfoEmpty": "  "
				},
			    "fnServerParams":function(aoData){
			    }
			});
			 $.formValidator.initConfig({formid:"myform"
		          ,onerror:function(msg){}
		          ,onsuccess:function(){
		        	  		remarkSubmit();
		          			return false;
		          }
		     });
			 
		}
		
		function initFilterTable(){
			var oTable=	$('#filterList').dataTable({
				"bProcessing": true, 
				"bServerSide": true,
				"sServerMethod": 'POST',
				"sAjaxSource":'${pageContext.request.contextPath}/event/event-view!listFilterByEventId.action?eventId='+${id},
				"bPaginate": true,
				"bSort": true,
				"bFilter":false,
				"bJQueryUI":false,
				"sPaginationType": "full_numbers",
				"sDom":'rt <"bottom"flpi>',
				"aLengthMenu": [[10, 20, 50, 100], [10, 20, 50,100]],
				"aoColumns":[
						{"mDataProp":"resName","bSortable": false},
						{"mDataProp":"eventTypeName","bSortable": false},
						{"mDataProp":"levelName","bSortable": false},
						{"mDataProp":"msg","bSortable": false},
						{"mDataProp":"occurTime","bSortable": false}
				], 
				 "oLanguage": { 
				 				"sLengthMenu": "每页 _MENU_ 条",
				 		 		"sZeroRecords": "  ",
								"sInfo": "当前从 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", 
								"sInfoEmpty": "没有找到记录",
								"oPaginate":{"sFirst":"首页","sPrevious":"上一页","sNext":"下一页","sLast":"尾页"}	
				},
			    "fnServerParams":function(aoData){
			    }
			});
		}
		function initChart(){
			var chartData = '${chartData}';
			//图表
			myChart = new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Bar2D.swf", "ChartId", "100%", "225", "0", "0" ); 
			myChart.setJSONData(chartData);      
			 myChart.render("chartContainer");  
		}
	 function ack(){
		  //提交
		$.ajax({
			   type: "POST", 
			   url: "${pageContext.request.contextPath}/event/active-event!ack.action", //请求的action
			   data: "id="+$("#id").val(), //传的参数
			   dataType: 'json',
			   success: function(data){ //结果
				   if(data.flag == "true"){
					   $("#ackButton").css({"display":"none"});
					   $("#acker").html(data.user);
					   $("#ackTime").html(data.time);
					   $("#eventstatus").html("已认领");
					   $('#processdiv1').removeClass('wait');
						$('#processdiv1').addClass('ready');
						$('#processdiv2').removeClass('wait');
						$('#processdiv2').addClass('ready');
					   window.opener.location.reload();
				   }else{
					   $.jBox.alert("此事件已经被认领或者清除！","提示");
				   }
			   }
		});
	  }
	 function confirm(){
		  //提交
		$.ajax({
			   type: "POST", 
			   url: "${pageContext.request.contextPath}/event/active-event!confirm.action", //请求的action
			   data: "id="+$("#id").val(), //传的参数
			   dataType: 'json',
			   success: function(data){ //结果
				   if(data.flag == "true"){
					   $("#confirmButton").css({"display":"none"});
					   $("#ackButton").css({"display":"none"});
					   $("#confirmer").html(data.userConfirm);
					   $("#confirmTime").html(data.confirmTime);
					   $("#acker").html(data.userAck);
					   $("#ackTime").html(data.ackTime);
					   $("#eventstatus").html("已清除");
					   $('#processdiv1').removeClass('wait');
						$('#processdiv1').addClass('ready');
						$('#processdiv2').removeClass('wait');
						$('#processdiv2').addClass('ready');
						$('#processdiv3').removeClass('wait');
						$('#processdiv3').addClass('ready');
						$('#processdiv4').removeClass('wait');
						$('#processdiv4').addClass('ready');
					   window.opener.location.reload();
				   }else{
					   $.jBox.alert("此事件已经被清除！","提示");
				   }
			   }
		});
	  }
	 function remarkSubmit(){
		 if($("#remark").val() == ''){
			 $.jBox.alert("备注内容不能为空！","提示");
				return false;
			}
		 if(($("#remark").val().replace(/[^\x00-\xff]/g, "xx")).length > 1024){
			 	$.jBox.alert("备注内容字数太长！长度(1-1024)！","提示");
				return false;
	    }
		  //提交
		$.ajax({
			   type: "POST", 
			   url: "${pageContext.request.contextPath}/event/event-view!submitRemark.action", //请求的action
			   data: "id="+$("#id").val()+"&remark="+encodeURI(encodeURI($("#remark").val())), //传的参数
			   dataType: 'json',
			   success: function(data){ //结果
				   if(data == true){
							var oTable=	$('#remarkList').dataTable();
							oTable.fnPageChange("first",true);
							$("#remark").val('');
				   }
			   }
		});
	  }
	 function submitCause(){
		 if($("#input1").val() == ''){
			 	$.jBox.alert("请填写原因！","提示");
			    return false;
		   }
		 var str = $("#input1").val();
		 if(str.length > 10){
			 	$.jBox.alert("原因字数太长，请简写！长度(1-10)！","提示");
				return false;
	    }
		 $.ajax({
			   type: "POST", 
			   url: "${pageContext.request.contextPath}/event/event-view!submitCause.action", //请求的action
			   data: "id="+$("#id").val()+"&cause="+$("#input1").val(), //传的参数
			   dataType: 'json',
			   success: function(data){ //结果
				   if(data == true){
					   $.ajax({
							url : "${pageContext.request.contextPath}/event/event-view!loadChartDate.action", // 
							type : 'POST',
							dataType : "json",
							data : {
								id :${eventBean.event.id}
							},
							success : function(data) {
								//图表
								myChart = new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Bar2D.swf", new Date().getTime(), "100%", "225", "0", "0" ); 
								 myChart.setJSONData(data);      
								 myChart.render("chartContainer"); 
								
								 $("#causeViewDiv").css({"display":""});
								 $("#casuediv").css({"display":"none"});
								 $("#causeEditDiv").css({"display":""});
								 $("#causeViewDiv").html($("#input1").val());
							}
						});
				   }
			   }
		});
	 }
	 function showCauseDiv(){
		 //if($("#casuediv").css("display") == 'none'){
			 $("#casuediv").css({"display":""});
			 $("#causeViewDiv").css({"display":"none"});
			 $("#causeEditDiv").css({"display":"none"});
			 
		 //}else{
		//	 $("#casuediv").css({"display":"none"});
		 //}
	 }
	 </script>
  </head>
  <body class="viewBd">
     <div class="topBg"></div>
  	<div class="viewDiv">
  	<h2 class="viewH2">${eventBean.event.msg}</h2>
  	<div class="Column processStatus">
			<h3 class="ColumnH3">
				<span>处理状态</span>
			</h3>
				<div id="process">
					<div class="node ready"><ul><li class="tx1">&nbsp;</li><li class="tx2">未认领</li></ul></div>
			        <div class="proce wait" id="processdiv1"><ul><li class="tx1">&nbsp;</li></ul></div>
			        <div class="node wait" id="processdiv2"><ul><li class="tx1">&nbsp;</li><li class="tx2">已认领</li></ul></div>
			        <div class="proce wait" id="processdiv3"><ul><li class="tx1">&nbsp;</li></ul></div>
			        <div class="node wait" id="processdiv4"><ul><li class="tx1">&nbsp;</li><li class="tx2">已清除</li></ul>
				</div>
				<div style="float: right;padding-right: 50px;">
			
		    <%
		    	if((Boolean)request.getAttribute("handleAuth")){
		    	    EventBean eventBean = (EventBean)request.getAttribute("eventBean");
		        	if(eventBean.getEvent().getStatus() == 0){
		        	    out.print("<input type='button' id='ackButton' value='认领' class='btn-4' onclick='ack();'>&nbsp;<input type='button' value='清除' id='confirmButton' class='btn-4' onclick='confirm();'>");
		        	}
		        	if(eventBean.getEvent().getStatus() == 1){
		        	    out.print("<input type='button' value='认领' class='btn-4' id='button' style='display: none;' onclick='ack();'>&nbsp;<input type='button' value='清除' id='confirmButton' class='btn-4' onclick='confirm();'>");
		        	}
		        	if(eventBean.getEvent().getStatus() == 2){
		        	    out.print("<input type='button' value='认领' class='btn-4' id='button' style='display: none;' onclick='ack();'>&nbsp;<input type='button' value='清除' id='confirmButton' class='btn-4' style='display: none;' onclick='confirm();'>");
		        	}
		    	}
		    %>
			</div>
			</div>
	</div>
	<div class="Column">
	        <h3 class="ColumnH3">
				<span>基本信息</span>
			</h3>
	  <div style="float:left; width:59%">
				<form action="" id="myform" name="myform" method="post">
				<ul class="contentUl">
					<li> 
						<span class="contentSL">事件内容：</span>
						<span class="contentSR">${eventBean.event.msg}</span>
						
					</li>
					
					<li> 
						<span class="contentSL">事件类别：</span>
						<span class="contentSR">${eventBean.eventTypeName}</span>
						
					</li>
							
					<li> 
						<span class="contentSL">事件状态：</span>
						<span class="contentSR" id="eventstatus">${eventBean.statusName}</span>
						
					</li>
					
					<li> 
						<span class="contentSL">事件级别：</span>
						<span class="contentSR">${eventBean.levelName}</span>
						
					</li>
						<li> 
						<span class="contentSL">资源ID：</span>
						<span class="contentSR">${eventBean.event.resId}</span>
					</li>
					
					<li> 
						<span class="contentSL">资源名称：</span>
						<span class="contentSR">${eventBean.resName}</span>
					</li>
					
					<li> 
						<span class="contentSL">产生时间：</span>
						<span class="contentSR">${eventBean.occurTime}</span>
						
					</li>
							
					<li> 
						<span class="contentSL">检测次数：</span>
						<span class="contentSR">${eventBean.event.count}</span>
						
					</li>
					
					<li> 
						<span class="contentSL">最后检测时间：</span>
						<span class="contentSR">${eventBean.lastOccurTime}</span>
						
					</li>
					
					<li> 
						<span class="contentSL">认领人：</span>
						<span class="contentSR" id="acker">${eventBean.event.ackUser}</span>
						
					</li>
	
					<li> 
						<span class="contentSL">认领时间：</span>
						<span class="contentSR" id="ackTime">${eventBean.ackTime}</span>
						
					</li>	
					
					<li> 
						<span class="contentSL">清除人：</span>
						<span class="contentSR" id="confirmer">${eventBean.event.confirmer}</span>
						
					</li>
					<li> 
						<span class="contentSL">清除时间：</span>
						<span class="contentSR" id="confirmTime">${eventBean.confirmTime}</span>
						
					</li>
					
					<li> 
						<span class="contentSL">产生原因：</span>
						<span class="contentSR">
							<div id="casuediv" style="display: none;">
								<input id="input1" name="input1" type="text" class='cssINPUT' style='text-align:left;height:18px; line-height:18px; padding:0; width:170px; display: block; float: left; position: absolute; border-right: 0px;' />
								<select name="select1" id="select1" class="cssINPUT"
									style="float: left; display: none; height: 20PX; position: absolute; cursor: pointer; margin-left: 2px; padding: 0px;">
									<option>--请选择原因--</option>
									<c:forEach items="${causeList}" var="cause">
						          		<option value="${cause.id}">${cause.value}</option>
									</c:forEach>
								</select>
								<input type="button" id="cause" name="cause" value="提交" class="btn-4 btn-5" onclick="submitCause();">
							</div>
							<div style="float: left; display: none" id="causeViewDiv">
								${eventBean.causes}
							</div>
							<div onclick="showCauseDiv();" style="float: left;" id="causeEditDiv">
								<img src="/bsm/style/default/bsm/images/edit.gif">
							</div>
						</span>
					</li>	
				</ul>
				</form>
			</div>
			<div style="float: left; width: 40%; margin-top:40px; border:1px solid #ccc;">
			
		 		<div id="chartContainer">
		 	
		 		</div>
			
		
	 </div>
    </div>
    <div class="Column">
			<h3 class="ColumnH3">
				<span>指标信息</span>
			</h3>
			<ul class="contentUl">
				<c:forEach items="${listEventPropHis}" var="indicatorList">
					<li> 
						<span class="contentSL" style="width: 600px; text-align: left;padding-left: 50px;">${indicatorList.propName}：${indicatorList.eventPropHis.propValue}${indicatorList.dataUnit}</span>
					</li>
				</c:forEach>
			</ul>
	</div>
    <input type="hidden" id="id" name="id" value=${eventBean.event.id}>
    <div class="Column">
			<h3 class="ColumnH3">
				<span>事件备注</span>
			</h3>
			<table id="remarkList" cellpadding="0" cellspacing="0" class="ColumnTable" style="WORD-BREAK: break-all; BORDER-COLLAPSE: collapse;">
				<thead>
					<tr>
						<th width="150">时间</th>
						<th width="70">备注人</th>
						<th width="764" class="b-1">备注</th>
					</tr>
				</thead>
			</table>
			</div>
		
			<div class="Column">
			<form>
				<span style="float: left;margin-left:40px; font-weight:600;"><img src="/bsm/style/default/bsm/images/pencil.png">我要备注</span>
				<div style="float: right;padding-right: 10px; padding-bottom:4px;">
				<input type="button" id="remarks1" name="button" value="提交" class="btn-4" onclick="remarkSubmit();">
				</div>
				<textarea id="remark" name="remark" rows="3" style="resize: none;width:938px;float:left;margin-left:40px;overflow: hidden;text-align: left;m"></textarea>
			</form>
			</div>   
	<c:if test="${relatedFlag}">
		<div class="Column">
			<div style="float:left; width:100%; padding-left:0px;">
				<h3 class="ColumnH3"><span>关联事件</span></h3>
				<div id="chartContainer1" style='height:225px;margin-left:40px;width:938px'>
					<iframe id="conFrame" name="conFrame" 
						src="${pageContext.request.contextPath}/jsp/event/event-view-related.jsp?mainId=${id}" frameborder="0"
						width="100%" height="100%" >
					</iframe>
				</div>
			</div>
		</div>
	</c:if>
	<c:if test="${filterflag}">
		<div class="Column">
			<h3 class="ColumnH3">
				<span>过滤事件</span>
			</h3>
			<table id="filterList" cellpadding="0" cellspacing="0" class="ColumnTable">
				<thead>
					<tr>
						<th width="15%">资源名称</th>
						<th width="15%">事件类别</th>
						<th width="8%">事件级别</th>
						<th width="40%">事件内容</th>
						<th class="b-1" width="12%">产生时间</th>
					</tr>
				</thead>
			</table>
		</div>
	</c:if>
		
	<c:if test="${notifyflag}">
		<div class="Column">
			<h3 class="ColumnH3">
				<span>事件通知</span>
			</h3>
			<table id="notifyList"  cellpadding="0" cellspacing="0" class="ColumnTable">
					<thead>
						<tr>
							<th width="80">通知人</th>
							<th width="60">通知方式</th>
							<th width="150">通知时间</th>
							<th class="b-1">通知内容</th>
						</tr>
					</thead>
			</table>
		</div>
	</c:if>
	
	<c:if test="${notifyRuleflag}">
		<div class="Column">
			<h3 class="ColumnH3">
				<span>资源责任人</span>
			</h3>
			<table id="notifyList"  cellpadding="0" cellspacing="0" class="ColumnTable">
					<thead>
						<tr>
							<th width="60">姓名</th>
							<th width="60">手机</th>
						</tr>
					</thead>
			</table>
		</div>
	</c:if>
  </body>
</html>
